遮罩效果

- 颜色叠加

优势：适合复杂且透明的图形 缺陷：遮罩的颜色只能为遮罩层亮色

关键属性： - 叠加方式: 颜色变淡; mix-blend-mode: screen;

实现原理

1. 准备一张黑白图片用作叠加，可具备透明度
2. 两个兄弟元素，处于层叠关系
3. 上层元素为遮罩层，背景填充图片
4. 上层元素设置颜色变淡
5. 此时，白色部分保留，黑色部分显示下层元素

.img{
	mix-blend-mode: screen;
}

- 文字遮罩

优势：通过游览器自带的css，快速完成遮罩 劣势：只能遮罩文字

关键属性： - 遮罩层颜色: 透明; -webkit-text-fill-color: transparent; - 遮罩范围: 文字; -webkit-background-clip: text;

实现原理

1. 准备一个文字标签
2. 在该标签，设置背景
3. 讲文字的范围，设定成背景的显示范围

h1 {
	-- 设置画布 --
	margin: 0;
	height: 800px;
	width: 800px;

	-- 设置文字 --
	text-align: center;
	line-height: 1;
	font-size: 300px;
	font-weight: 800;

	-- 设置背景及遮罩 --
	background: #6cf;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}